<template>
  <div class="detail-container page-container">
    <div class="detail-box">
      <el-row>
        <el-col :span="24">
          <div class="text-item-label">单位名称:</div>
          <el-input
            v-model="input1"
            :disabled="true">
          </el-input>
        </el-col>
      </el-row>
      <el-row class="bottomline">
        <el-col :span="12">
          <div class="text-item-label">单位地址:</div>
          <el-input
            v-model="input2"
            :disabled="true">
          </el-input>
        </el-col>
        <el-col :span="12">
          <div class="text-item-label">联系电话:</div>
          <el-input
            v-model="input3"
            :disabled="true">
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="text-item-label">订单日期:</div>
          <el-input
            v-model="input4"
            :disabled="true">
          </el-input>
        </el-col>
        <el-col :span="12">
          <div class="text-item-label">交货日期:</div>
          <el-input
            v-model="input5"
            :disabled="true">
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="text-item-label">外商国别:</div>
          <el-input
            v-model="input6"
            :disabled="true">
          </el-input>
        </el-col>
        <el-col :span="12">
          <div class="text-item-label">报关地海关:</div>
          <el-input
            v-model="input7"
            :disabled="true">
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="text-item-label">起运港:</div>
          <el-input
            v-model="input8"
            :disabled="true">
          </el-input>
        </el-col>
        <el-col :span="12">
          <div class="text-item-label">抵运国:</div>
          <el-input
            v-model="input9"
            :disabled="true">
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="text-item-label">目的港:</div>
          <el-input
            v-model="input10"
            :disabled="true">
          </el-input>
        </el-col>
        <el-col :span="12">
          <div class="text-item-label">贸易方式:</div>
          <el-input
            v-model="input11"
            :disabled="true">
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="text-item-label">价格条款:</div>
          <el-input
            v-model="input12"
            :disabled="true">
          </el-input>
        </el-col>
        <el-col :span="12">
          <div class="text-item-label">包装方式:</div>
          <el-input
            v-model="input13"
            :disabled="true">
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="text-item-label">运输方式:</div>
          <el-input
            v-model="input14"
            :disabled="true">
          </el-input>
        </el-col>
        <el-col :span="12">
          <div class="text-item-label">订单币种:</div>
          <el-input
            v-model="input15"
            :disabled="true">
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="text-item-label">收汇方式:</div>
          <el-input
            v-model="input16"
            :disabled="true">
          </el-input>
        </el-col>
        <el-col :span="12">
          <div class="text-item-label">已投保中信保:</div>
          <el-input
            v-model="input17"
            :disabled="true">
          </el-input>
        </el-col>
      </el-row>
      <el-row class="goods-list">
        <el-col :span="24">
          <el-table :data="goodsList" border fit el-tabl stripe
            style="width: 100%;">
            <el-table-column prop='hsCode' align='center' label='HS商品编码' width='80'>
              </el-table-column>
              <el-table-column prop='hsName' align='center' min-width='100px' label='商品品名'>
              </el-table-column>
              <el-table-column prop='specification' align='center' min-width='90px' label='规格型号'>
              </el-table-column>
              <el-table-column prop='isOwm' align='center' min-width='60px' label='自有品牌'>
              </el-table-column>
              <el-table-column prop='amount' align='center' min-width='60px' label='订单数量'>
              </el-table-column>
              <el-table-column prop='statisticUnits' align='center' min-width='60px' label='统计单位'>
              </el-table-column>
              <el-table-column prop='unitPrice' align='center' min-width='80px' label='成交单价'>
              </el-table-column>
              <el-table-column prop='totalPrice' align='center' min-width='80px' label='成交总价'>
              </el-table-column>
              <el-table-column prop='originalGoodsPlace' align='center' min-width='80px' label='境内货源地'>
              </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import {
  getOrderInfoPost,
  getOrderInfo3001,
  getOrderInfo3002,
  getOrderInfo3003
} from '@/api/order';

export default {
  data() {
    return {
      orderID: '',
      input1: '',
      input2: '',
      input3: '',
      input4: '',
      input5: '',
      input6: '',
      input7: '',
      input8: '',
      input9: '',
      input10: '',
      input11: '',
      input12: '',
      input13: '',
      input14: '',
      input15: '',
      input16: '',
      input17: '',
      goodsList: [],
      goodsplace: [],
      countries: [],
      customs: [],
      startPort: [],
      endCountry: [],
      endPort: [],
      myfs: [],
      jgtk: [],
      bzfs: [],
      ysfs: [],
      ddbz: [],
      shfs: [],
      yszffs: []
    };
  },
  created() {
    this.orderID = localStorage.getItem('orderID');
    this.getOrderInfo(this.orderID);
    // this.getOrderDetailInfo(this.orderID, '1');
  },
  watch: {
    $route(to, from) {
      var orderid = to;
      if (orderid.name == 'orderDetail') {
        var oid = orderid.query;
        this.orderID = localStorage.getItem('orderID');
        this.getOrderInfo(oid.id);
        // this.getOrderDetailInfo(oid.id, '1');
      }
    }
  },
  methods: {
    initOrderChange() {
      let that = this;
      that.loading = true;
      //货源地
      getOrderInfo3001('3008') //货源地
        .then(data => {
          var myData = data.data;
          if (myData.length > 0) {
            //加入数据内容
            for (let i of myData) {
              var map = {
                id: i.configKey,
                name: i.configValue
              };
              that.goodsplace.push(map);
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });

      getOrderInfo3001('3003') //国别地区//已修改
        .then(data => {
          var myData = data.data;
          if (myData.length > 0) {
            //加入数据内容
            for (let i of myData) {
              var map = {
                id: i.configKey,
                name: i.configValue
              };
              that.endCountry.push(map);
              that.countries.push(map);
            }
            let obj = {};
            obj = this.countries.find(item => {
              return item.id === this.input6; //筛选出匹配数据
            });
            that.input6 = obj.name;
            obj = this.countries.find(item => {
              return item.id === this.input9; //筛选出匹配数据
            });
            that.input9 = obj.name;
          }
        })
        .catch(function(error) {
          console.log(error);
        });

      getOrderInfo3002()
        .then(data => {
          var myData = data.data;
          if (myData.length > 0) {
            //加入数据内容
            for (let i of myData) {
              var map = {
                id: i.departmentCode,
                name: i.departmentName
              };
              that.customs.push(map);
            }
            let obj = {};
            obj = this.customs.find(item => {
              return item.id === this.input7; //筛选出匹配数据
            });
            that.input7 = obj.name;
          }
        })
        .catch(function(error) {
          console.log(error);
        });

      getOrderInfo3003() //港口，已修改
        .then(data => {
          var myData = data.data;
          if (myData.length > 0) {
            //加入数据内容
            for (let i of myData) {
              var map = {
                id: i.wharfCode,
                name: i.wharfName + '(' + i.wharfEnName + ')'
              };
              that.startPort.push(map);
              that.endPort.push(map);
            }
            let obj = {};
            obj = this.startPort.find(item => {
              return item.id === this.input8; //筛选出匹配数据
            });
            that.input8 = obj.name;
            obj = this.endPort.find(item => {
              return item.id === this.input10; //筛选出匹配数据
            });
            that.input10 = obj.name;
          }
        })
        .catch(function(error) {
          console.log(error);
        });

      getOrderInfo3001('3010') //监管方式//已修改
        .then(data => {
          var myData = data.data;
          if (myData.length > 0) {
            //加入数据内容
            for (let i of myData) {
              var map = {
                id: i.configKey,
                name: i.configValue
              };
              that.myfs.push(map);
            }
            let obj = {};
            obj = this.myfs.find(item => {
              return item.id === this.input11; //筛选出匹配数据
            });
            that.input11 = obj.name;
          }
        })
        .catch(function(error) {
          console.log(error);
        });

      getOrderInfo3001('3004') //已修改
        .then(data => {
          var myData = data.data;
          if (myData.length > 0) {
            //加入数据内容
            for (let i of myData) {
              var map = {
                id: i.configKey,
                name: i.configValue
              };
              that.jgtk.push(map);
            }
            let obj = {};
            obj = this.jgtk.find(item => {
              return item.id === this.input12; //筛选出匹配数据
            });
            that.input12 = obj.name;
          }
        })
        .catch(function(error) {
          console.log(error);
        });

      getOrderInfo3001('3011') //已修改
        .then(data => {
          var myData = data.data;
          if (myData.length > 0) {
            //加入数据内容
            for (let i of myData) {
              var map = {
                id: i.configKey,
                name: i.configValue
              };
              that.bzfs.push(map);
            }
            let obj = {};
            obj = this.bzfs.find(item => {
              return item.id === this.input13; //筛选出匹配数据
            });
            that.input13 = obj.name;
          }
        })
        .catch(function(error) {
          console.log(error);
        });

      getOrderInfo3001('3005') //已修改
        .then(data => {
          var myData = data.data;
          if (myData.length > 0) {
            //加入数据内容
            for (let i of myData) {
              var map = {
                id: i.configKey,
                name: i.configValue
              };
              that.ysfs.push(map);
            }
            let obj = {};
            obj = this.ysfs.find(item => {
              return item.id === this.input14; //筛选出匹配数据
            });
            that.input14 = obj.name;
          }
        })
        .catch(function(error) {
          console.log(error);
        });

      getOrderInfo3001('3001') //修改过
        .then(data => {
          var myData = data.data;
          if (myData.length > 0) {
            //加入数据内容
            for (let i of myData) {
              var map = {
                id: i.configKey,
                name: i.configValue
              };
              that.ddbz.push(map);
            }
            let obj = {};
            obj = this.ddbz.find(item => {
              return item.id === this.input15; //筛选出匹配数据
            });
            that.input15 = obj.name;
          }
        })
        .catch(function(error) {
          console.log(error);
        });

      getOrderInfo3001('3009') //已修改
        .then(data => {
          var myData = data.data;
          if (myData.length > 0) {
            //加入数据内容
            for (let i of myData) {
              var map = {
                id: i.configKey,
                name: i.configValue
              };
              that.shfs.push(map);
              that.yszffs.push(map); //运输支付方式
            }
            let obj = {};
            obj = this.shfs.find(item => {
              return item.id === this.input16; //筛选出匹配数据
            });
            that.input16 = obj.name;
          }
        })
        .catch(function(error) {
          console.log(error);
        });

      that.loading = false;
    },
    //初始化数据
    getOrderInfo(orderID) {
      let that = this;
      that.loading = true;
      getOrderInfoPost(orderID)
        .then(data => {
          that.loading = false;
          console.log('order info ', data);
          var myData = data.data;
          console.log(myData);
          if (myData === null) {
            that.clearAll();
          } else {
            //加入数据内容
            that.input1 = myData.companyInfo.companyHsName;
            that.input2 = myData.companyInfo.address;
            that.input3 = myData.companyInfo.contactsPhone;
            // that.input4 = myData.orderCodeCmp;
            that.input4 = myData.orderInfo.orderTime;
            that.input5 = myData.orderInfo.deliveryTime;
            that.input6 = myData.orderInfo.foreignCountry;
            that.input7 = myData.orderInfo.declareCustoms;
            that.input8 = myData.orderInfo.portLoading;
            // that.input12 = myData.foreignCountry;
            that.input9 = myData.orderInfo.arrivalCountry;
            that.input10 = myData.orderInfo.portDestination;
            that.input11 = myData.orderInfo.tradeMode;
            that.input12 = myData.orderInfo.priceClause;
            that.input13 = myData.orderInfo.packingMode;
            that.input14 = myData.orderInfo.transportMode;
            that.input15 = myData.orderInfo.orderCurrency;
            that.input16 = myData.orderInfo.receiptMode;
            // that.input16 = myData.orderInfo.transportPaymentMode;
            that.input17 = myData.orderInfo.isInsure == '2' ? '是' : '否';
            that.initOrderChange();
            //添加产品子表
            myData = myData.products;

            if (myData.length > 0) {
                that.goodsList = [];
              //加入数据内容
              for (let i of myData) {
                var map = {
                  id: i.id,
                  hsCode: i.hsCode,
                  hsName: i.hsName,
                  specification: i.specification,
                  isOwm: i.isOwm == '2' ? '是' : '否',
                  amount: i.amount,
                  statisticUnits: i.statisticUnits,
                  unitPrice: i.unitPrice,
                  totalPrice: i.totalPrice,
                  originalGoodsPlace: i.originalGoodsPlace
                };
                var obj = {};
                let _data=this.goodsplace;
                obj = _data.find(item => {
                  return item.id === map.originalGoodsPlace; //筛选出匹配数据
                });
                if(obj&&obj.name){
                    map.originalGoodsPlace = obj.name;
                }else{
                    map.originalGoodsPlace = '';
                }
                /*map.originalGoodsPlace = obj.name;*/
                that.goodsList.push(map);
              }
              that.goodsList.count = data.count;
              that.goodsList.page = data.page;
            }
          }
        })
        .catch(function(error) {
          console.log(error);
          that.loading = false;
        });
    }
  }
};
</script>
<style rel='stylesheet/scss' lang='scss' scoped>
@import 'src/styles/mixin.scss';
.page-container {
  width: 1000px;
}

.detail-box {
  padding: 20px;
}

.item-label {
  float: left;
  box-sizing: border-box;
  font-size: 14px;
  width: 70px;
  line-height: 80px;
}

.text-item-label {
  width: 110px;
  float: left;
  color: #999;
  height: 40px;
  line-height: 40px;
}

.text-item-cont {
  float: left;
  height: 40px;
  line-height: 40px;
}

.bottomline {
  border-bottom: 1px solid #bbb;
  margin-bottom: 20px;
}

.logo-item {
  float: left;
}
.editor-container {
  margin-bottom: 20px;
}

.normal-input {
  width: 100%;
}

.goods-list {
  margin-top: 20px;
}
</style>
